// 城堡组件
Vue.component('castle', {
	template: `<div class="castle" :class="'player-' + index">
    <img class="building" :src="'svg/castle' + index + '.svg'" />
    <img class="ground" :src="'svg/ground' + index + '.svg'" />
    <castle-banners :player="player" />
  </div>`,
	props: ['player', 'index']
})

// 城堡上面的旗帜
Vue.component('castle-banners', {
	template: `<div class="banners">
		<!-- 食 物 --> 
		<img class="food-icon" src="svg/food-icon.svg" /> 
		<!-- 这 里 是 小 气 泡 --> 
		<bubble type="food" :value="player.food" :ratio="foodRatio" />
		<!-- 这 里 是 旗 帜 栏 --> 
		<banner-bar  class="food-bar" color="#288339" :ratio="foodRatio" />
		
		<!-- 生 命 值 --> 
		<img class="health-icon" src="svg/health-icon.svg" /> 
		<!-- 这 里 是 小 气 泡 --> 
		<bubble type="health" :value="player.health" :ratio="healthRatio" />
		<!-- 这 里 是 旗 帜 栏 -->
		<banner-bar class="health-bar" color="#9b2e2e" :ratio="healthRatio" />
	</div>`,
	props: ['player'],
	computed: {
		// 计算食物的比例，用来显示小旗帜的长度
		foodRatio() {
			return this.player.food / maxFood;
		},
		// 计算生命值的比例，用来显示小旗帜的长度
		healthRatio() {
			return this.player.health / maxHealth;
		}
	}
})

// 食物和生命值气泡
/*
type ：区 分 食 物 和 生 命 值， 用 于 CSS 类 和 图 像 路 径 
value ：在 小 气 泡 中 显 示 的 数 值 
ratio ：当 前 值 除 以 最 大 值 
我 们 还 需 要 一 个 计 算 属 性， 用 于 根 据 ratio prop 计 算 出 小 气 泡 的 垂 直 位 置。 位 置 的 垂 直 范 围 是 40 ～ 260 像 素。
bubble 组 件 的 根 元 素 是 一 个 div ，它 有 一 个 stat-bubble CSS 类、 
一 个 动 态 的 CSS 类（ 根 据 type prop 的 值， 取' food-bubble' 或' health-bubble' ），
以 及 依 赖 于 计 算 属 性 bubbleStyle 的 一 个 动 态 CSS。

*/
Vue.component('bubble', {
	template: `<div class="stat-bubble" :class="type + '-bubble'" :style="bubbleStyle">
	    <img :src="'svg/' + type + '-bubble.svg'" />
	    <div class="counter">{{ value }}</div>
	  </div>`,
	props: ['type', 'ratio', 'value'],
	computed: {
		bubbleStyle() {
			return {
				top: (this.ratio * 220 + 40) * state.worldRatio + 'px',
			}
		}
	}
})


Vue.component('banner-bar', {
	template: `#banner`,
	props: ['color', 'ratio'],
	data() {
		return {
			height: 0,
		}
	},
	created() {
		this.height = this.targetHeight;
	},
	computed: {
		targetHeight() {
			return 220 * this.ratio + 40;
		}
	},
	watch: {
		targetHeight(newVal, oldVal) {
			const vm = this;
			new TWEEN.Tween({
					value: oldVal
				}).easing(TWEEN.Easing.Cubic.InOut)
				.to({
					value: newVal
				}).onUpdate(function() {
					vm.height = this.value.toFixed(0);
				}).start();
		}
	}
})

// 云朵

// 云朵动画持续时间
const cloudAnimationDurations = {
	min: 10000,
	max: 50000,
}

Vue.component('cloud', {
	template: `<div class="cloud" :class="'cloud-' + type" :style="style">
		<img :src="'svg/cloud' + type + '.svg'" @load="initPosition">
	</div>`,
	// 传入type prop的值的范围是1～5。这里，使用%操作符返回除以5的余数。
	props: ['type'],
	data() {
		return {
			style: {
				transform: 'none',
				zIndex: 0,
			}
		}
	},
	methods: {
		setPosition(left, top) {
			// 使 用 transform 可 以 获 得 更 好 的 性 能 
			this.style.transform = `translate(${left}px, ${top}px)`;
		},
		initPosition() {
			const width = this.$el.clientWidth;
			this.setPosition(-width, 0);
		},
		startAnimation(delay = 0) {
			const vm = this;
			// 元素宽度、
			const width = this.$el.clientWidth;
			// 随机动画持续时间
			const {
				min,
				max
			} = cloudAnimationDurations
			animationDuration = Math.random() * (max - min) + min;
			// 将速度快的云朵放到最前面
			this.style.zIndex = Math.round(max - animationDuration);
			// 随机位置top值
			const top = Math.random() * (window.innerHeight * 0.3)
			// 动画
			new TWEEN.Tween({
					value: -width
				}).to({
					value: window.innerWidth
				}, animationDuration).delay(delay)
				.onUpdate(function() {
					vm.setPosition(this.value, top)
				}).onComplete(() => {
					// 随机延迟时间
					this.startAnimation(Math.random() * 10000)
				}).start();
		},
	},
	mounted() {
		// 在组件的mounted钩子中，调用startAimation
		// 以负值延迟开始动画，所以动画将从中途开始
		this.startAnimation(-Math.random() * cloudAnimationDurations.min)
	},
})
